<!DOCTYPE html >

<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>day-1-选择器</title>

    <style>
        /* 高亮css类 */
        .highlight {
            color: red;
            font-size: 30px;
            background: lightblue;
        }
    </style>

</head>

<body>
<div class="section">
    <h2>jQuery选择器实验室</h2>
    <input style="height: 24px" id="txtSelector"/>
    <button id="btnSelect" style="height: 30px">选择</button>
    <hr/>
</div>
<div>
    <h1 id="1">1111</h1>
    <h1 id="12">1111</h1>
    <h1 id="13">1111</h1>
    <h1 id="143">1111</h1>
    <h1 id="43">1111</h1>
    <h1 class="class-h1">2222</h1>
    <h1>3333</h1><br/>
    <a style="color: darkgreen" href="https://blog.csdn.net/pseudonym_/article/details/76093261/">JQuery_九大选择器</a>
</div>

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="../html-js/tool.js"></script>
<script type="text/javascript">
    /**
     *
     *   jQuery 与 $ 都可以调用jQuery框架
     *
     * /


    /**
        id选择器使用"#id值"进行选择
        css选择器使用".css类名"进行选择
        $(".myclass").addClass("highlight");
    */

    document.getElementById("btnSelect").onclick = function () {
        var strSelector = document.getElementById("txtSelector").value;
        Ulog.i("strSelector",strSelector);
        //jquery的选择器方法
        //选择器
        jQuery("*").removeClass("highlight");
        $(strSelector).addClass("highlight");
    }

    //******************************层叠 与 属性 选择器**********************

    // $("#1,.class-h1").addClass("highlight"); 重点 一个方法可以传入多个参数,对多个dom 进行操作
    // $("form input").addClass("highlight"); 包含子元素和子元素的子元素
    // $("form > input").addClass("highlight"); 只包含子元素，不包含子元素的子元素

    // $('h1[id="1"]').addClass("highlight"); 属性选择器 id相同
    // $('h1[id!="1"]').addClass("highlight"); id不同
    // $('h1[id^="1"]').addClass("highlight"); id开始 为"1"相同
    // $('h1[id$="3"]').addClass("highlight"); id结尾为"3"相同
    // $('h1[id*="1"]').addClass("highlight"); 包含"1"

    //******************************位置 选择器**********************


    // $("strSelector:first").addClass("highlight");获取第一个元素
    // $("strSelector:last").addClass("highlight");获取最后一个元素
    // $("strSelector:even").addClass("highlight");获取偶数位置的元素
    // $("strSelector:odd").addClass("highlight");获取奇数位置的元素
    // $("strSelector:eq(3)").addClass("highlight");获取指定位置的元素 这里选择的是"3"

    //******************************表单选择器**********************

    // $("strSelector:input").addClass("highlight");匹配所有 input, textarea, select 和 button 元素
    // $("strSelector:text").addClass("highlight");匹配所有的单行文本框。
    // $("strSelector:password").addClass("highlight");匹配所有密码框。
    // $("strSelector:image").addClass("highlight");匹配所有图像域。

</script>
</body>
</html>
